<template>
  <div class="keyvalue-list-container">
    <div v-for="(item, index) in _content" :key="index" class="keyvalue-container">
      <div class="key-wrapper" :style="{
        width: keyWidth
      }">{{ item.label }}</div>
      <div class="value-wrapper">{{ item.value }}</div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    content: {
      type: Object,
      default() {
        return {};
      }
    },
    keyWidth: {
      type: String,
      default: "120px"
    }
  },
  mounted() {
    // console.log((this as any).content);
  },
  computed: {
    _content() {
      const result = [];
      for (const key in (this as any).content) {
        result.push({
          label: key,
          value: (this as any).content[key]
        });
      }
      return result;
    }
  }
})
</script>
<style lang="scss" scoped>
.keyvalue-list-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .keyvalue-container {
    width: 100%;
    display: flex;
    margin-bottom: 10px;
    align-items: center;

    .key-wrapper {
      color: #999999;
      font-size: 12px;
      flex-shrink: 0;
      padding-right: 10px;
    }

    .value-wrapper {
      color: #333333;
      font-size: 12px;
      flex-grow: 1;
    }
  }
}
</style>